<!--
 * @Descripttion: 一级属性
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-04-28 15:42:37
-->
<template>
  <div class="lb-goods-list">
      <top-nav :title="navTitle" :isBack="true"></top-nav>

    <div class="page-main">
      <el-row class="page-top-operate">
        <el-button
          type="primary"
          @click="addFirst()"
          size="medium"
          icon="el-icon-plus"
        >添加</el-button>
      </el-row>
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tableData"
        :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="name"  label="属性名称" ></el-table-column>
        <el-table-column prop="level"  label="属性级别" >

        </el-table-column>
        <el-table-column prop="status" show-overflow-tooltip label="是否启用">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              @change="upperAndDelGoods(scope.row.status,scope.row.id)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" sortable label="创建时间">
          <template slot-scope="scope">
            <p>{{scope.row.create_time | handleTime(1)}}</p>
            <p>{{scope.row.create_time | handleTime(2)}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="address"  label="操作">
          <template slot-scope="scope">
            <div class="table-operate">
              <lb-button
                size="mini"
                plain
                type="primary"
                icon="el-icon-edit"
                @click="editParimary(scope.row)"
              >{{$t('action.edit')}}</lb-button>
              <lb-button v-if="scope.row.pid===0"
                size="mini"
                plain
                type="primary"
                @click="goLowerLevel(scope.row.id)"
              >查看下级</lb-button>
              <lb-button
                size="mini"
                plain
                type="danger"
                icon="el-icon-delete"
                @click="delParimary(scope.row.id)"
              >{{$t('action.delete')}}</lb-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <lb-page
        :page="searchForm.page"
        :pageSize="searchForm.limit"
        :total="total"
        :batch="false"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      ></lb-page>
    </div>
    <el-dialog width="400px" center :title="title" :visible.sync="showAddGood">
      <el-form label-width="100px" :rules="rules" ref="addForm" :model="addForm">
        <el-form-item label="属性名称" prop="name">
          <el-col :span="8">
            <el-input placeholder="请输入属性名称" style="width:200px" v-model="addForm.name" size="large"></el-input>
          </el-col>
        </el-form-item>
        <!-- <el-form-item label="是否启用">
          <el-radio-group v-model="addForm.status">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <div class="btn_view"><el-button plain="" @click="showAddGood=false">取消</el-button><el-button type="primary" @click="addParimary()">确定</el-button></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: '添加一级属性',
      rules: {
        name: [{required: true, message: '请输入属性名称', trigger: 'blur'}]
      },
      addForm: {
        name: '',
        pid: 0,
        status: 1
      },
      showAddGood: false,
      showTemplate: false,
      loading: false,
      searchForm: {
        pid: '',
        page: 1,
        limit: 10
      },
      editParimaryItem: '',
      tableData: [],
      total: 0,
      multipleSelection: []
    }
  },
  created () {
    this.getDataList()
  },

  methods: {
    addFirst () {
      this.title = '添加一级属性'
      this.showAddGood = !this.showAddGood
      this.addForm.name = ''
    },
    //   查看下级数据
    goLowerLevel (id) {
      this.searchForm.pid = id
      this.addForm.pid = id
      this.searchForm.page = 1
      this.tableData = []
      this.$router.push('/malls/secndparimary?id=' + id)
    },
    // 编辑参数
    editParimary (item) {
      this.title = '编辑一级属性'
      this.editParimaryItem = item
      this.addForm.name = this.editParimaryItem.name
      this.addForm.status = this.editParimaryItem.status
      this.showAddGood = true
    },
    // 删除参数
    delParimary (id) {
      this.config(() => {
        this.$api.updateGoodsParameterStatus({
          id: id,
          status: -1
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.searchForm.page = this.searchForm.page < Math.ceil((this.total - 1) / this.searchForm.limit) ? this.searchForm.page : Math.ceil((this.total - 1) / this.searchForm.limit)
            this.getDataList()
          }
        })
      })
    },

    // 确认函数
    config (func) {
      this.$confirm('你确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (typeof func === 'function') {
          func()
        }
      })
    },

    upperAndDelGoods (status, id) {
      let statusIndex = 0
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].id === id) {
          statusIndex = i
          status === 0 ? this.tableData[i].status = 1 : this.tableData[i].status = 0
        }
      }
      this.$api.updateGoodsParameterStatus({
        id: id,
        status: status
      }).then(res => {
        if (res.code === 200) {
          this.tableData[statusIndex].status = status
          this.$message.success('修改成功')
        }
      })
    },
    // 修改参数
    addParimary () {
      if (this.editParimaryItem) {
        let name = this.addForm.name
        if (name.trim().length === 0) {
          return this.$message.warning('请输入属性名称')
        }
        this.addForm.id = this.editParimaryItem.id
        this.$api.updateGoodsParameterEdit(this.addForm).then(res => {
          if (res.code === 200) {
            this.$message.success('修改成功')
            this.showAddGood = false
            this.editParimaryItem = ''
            this.getDataList()
          }
        })
      } else {
        let name = this.addForm.name
        if (name.trim().length === 0) {
          return this.$message.warning('请输入属性名称')
        }
        this.$api.addGoodsParameterAdd(this.addForm).then(res => {
          if (res.code === 200) {
            this.$message.success('添加成功')
            this.showAddGood = false
            this.getDataList()
          }
        })
      }
    },
    // 获取参数列表
    getDataList () {
      this.$api.getGoodsParameterList(this.searchForm).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.data
          this.total = res.data.total
        }
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleSizeChange (val) {
      this.searchForm.limit = val
      this.handleCurrentChange(1)
    },
    handleCurrentChange (val) {
      this.searchForm.page = val
      this.getDataList()
    }
  },
  filters: {
    handleTime (val, type) {
      let time = type === 1 ? moment(val * 1000).format('YYYY-MM-DD') : type === 2 ? moment(val * 1000).format('HH:mm:ss') : moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
.btn_view{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
